<template>
    <div class="product-list-main">
        <div class="left">
            <div class="title">
                产品专区
                <i>/ PRODUCT</i>
            </div>
            <product-bar-header title="新品展示" style="margin-top: 4px"/>
            <product-bar title="金属扣" style="margin-top: 4px" :list="buttonList[0]" @itemClick="itemClick"/>
        </div>
        <div class="right">
            <div class="til01">产品中心</div>
            <div>
                <el-row :gutter="12">
                    <el-col :span="8" :xl="4" v-for="(item,index) in btnList" :key="`${item.title}-${index}`">
                        <product-item :item="item" @click="click(item)"/>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import ProductBarHeader from "@/components/product-bar/product-bar-header";
    import ProductBar from "@/components/product-bar/index";
    import ProductItem from "@/components/product-item";
    import {buttonList} from '@/const/btnList'


    export default {
        name: "product-list",
        components: {ProductItem, ProductBar, ProductBarHeader},
        data() {
            return {
                buttonList,
                btnList: []
            }
        },
        created() {
            this.btnList = buttonList[0][0].list
        },
        methods: {
            itemClick(item) {
                this.btnList = item.list
            },
            click(item) {
                this.$router.push({
                    path: '/product',
                    query: {
                        item
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .product-list-main {
        min-width: 1200px;
        width: 80%;
        margin: 24px auto;
        display: flex;
        flex-direction: row;
    }

    .left {
        width: 255px;
        padding: 25px 40px;
        background: white;
        margin-right: 24px;

        .title {
            height: 80px;
            font: 24px "Microsoft Yahei";
            font-weight: bold;
            line-height: 70px;
            overflow: hidden;
            margin-bottom: 3px;
            color: #fff;
            background: darkorange;
            text-align: center;

            &:after {
                content: "";
                position: absolute;
                top: 100%;
                right: 100%;
                width: 50px;
                border: 5px;
                border-color: darkorange transparent transparent transparent;
            }

            i {
                font: 16px Arial, Helvetica, sans-serif;
                color: #fff;
                font-weight: normal;
                text-transform: uppercase;
                padding-left: 8px;
            }
        }
    }

    .right {
        width: 100%;
        background: #fff;
        padding: 25px 30px 40px 30px;

        .til01 {
            font: 20px "Microsoft Yahei";
            height: 53px;
            line-height: 53px;
            overflow: hidden;
            color: #333;
            background: url(../assets/line.gif) no-repeat left bottom;
            margin-bottom: 24px;
        }
    }
</style>